// @flow
import React from 'react'
import styles from './TableSelect.css'
import Table from 'components/Table'
type Props = {
  options: Array<Object>,
  data: Array<Object>
}
type State ={
  selects: Array<Object>,
  visible: string
}
export default class TableSelect extends React.Component {
  props: Props
  state: State
  selectChange: Function
  dropDown: Function
  constructor (props: Props) {
    super(props)
    this.state = {
      selects: [],
      visible: 'none'
    }
    this.selectChange = this.selectChange.bind(this)
    this.dropDown = this.dropDown.bind(this)
  }

  selectChange (params: Array<Object>) {
    this.setState({
      selects: params
    })
  }

  dropDown () {
    this.setState({ visible: this.state.visible === 'block' ? 'none' : 'block' })
  }

  render () {
    const { data, options } = this.props
    const allSelect = [{ headerName: '全选', width: 70, checkboxSelection: true }]
    const columnDefs = allSelect.concat(options).map((x) => {
      x.suppressMenu = true
      x.cellStyle = {
        padding: '5px',
        textAlign: 'center'
      }
      return x
    })
    const { selects, visible } = this.state
    const items = selects.map((x) => {
      return x.name
    })
    return (
      <div className={styles['table-select']}>
        <div className={styles['table-input']} onClick={this.dropDown} ref='tableSelect'>
          <div className={styles['items']}>{items.join(' ; ')}</div>
        </div>
        <div className={styles['select-box']} style={{ display: visible }}>
          <Table
            columnDefs={columnDefs}
            rowData={data}
            selectChange={this.selectChange}
            />
        </div>
      </div>
    )
  }
}
